<!-- <template>
        <div class="w-100" style="height: 90%">
        <div
          id="zs_szy"
          class="w-100"
          style="height: 100%; position: relative"
        ></div>
      </div>
</template>
    
<script setup lang='ts'>
import * as echarts from 'echarts';
import barY from '@/assets/image/underGround/ball.png'
const props=defineProps({
    szyData:{
        type:Array,
        default:()=>[]
    },
    selectValue: {
    type: Number,
    default: 2024,
  },
})
watch(() => props.selectValue, (newValue, oldValue) => {
  getData(newValue)
});
const getData = (value:any)=>{
}


let option:any=
{
        tooltip: {},
        color:['#59EBE8','#f29701'],
        animationDuration: 10000000, // 动画持续时间，单位毫秒
        animationEasing: 'linear' ,// 缓动效果，线性的匀速运动
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
                 repulsion: 200,  //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                 edgeLength: 70,   //边的两个节点之间的距离，值越小则长度越长，这个距离也会受                                             repulsion影响。    
                 gravity: 0.05,  //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                 layoutAnimation : true  //初始化时转动动画
            },
            label: {
              show: true,
              formatter: ["{a|{c}}", "{b|{b}}"].join("\n"),
              fontWeight: "1000",
              fontSize: "18",
              align: "center",
              verticalAlign: "center",
              rich: {
                a: {
                  color: "#59EBE8",
                  fontSize: 25,
                  lineHeight: 30,
                  textBorderColor: "transparent",
                  textBorderWidth: 0,
                },
                b: {
                  color: "#59EBE8",
                  fontSize: 14,
                  lineHeight: 30,
                  textBorderColor: "transparent",
                  textBorderWidth: 0,
                },
              },
            },
            data:  []
          },
        ],
      }
var myChart:any 
onMounted(() => {
    
    let data:any=[]
    let arr=props.szyData.sort((a:any, b:any) =>  a.value - b.value);
    arr.map((item:any,index:any)=>{
    data.push(
          {
        name:item.name,
        value: item.value+'吨',
        symbolSize: (index + 1) * 10 + 90,
        symbol: "image://"+ barY,
        draggable: true,
        label: {
            normal: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff',
                },
            },
        },
 
    },
        )
})
console.log( data,' props.szyData');

     myChart = echarts.init(document.getElementById('zs_szy') as HTMLDivElement);
     option.series[0].data=data
    myChart.setOption(option);
    (option as any).series=[]
    setInterval(()=>{
        // myChart.setOption(option)
        var randomDuration = Math.floor(Math.random() * 2000) + 1000; // 生成 1000 到 3000 毫秒之间的随机持续时间
    var randomEasing = ['linear', 'easeInOut', 'elasticOut'][Math.floor(Math.random() * 3)]; // 随机选择缓动效果

    myChart.setOption({
        series: [{
            animationDuration: randomDuration, // 随机持续时间
            animationEasing: randomEasing // 随机缓动效果
        }]
    });
    }, 2000);

});
</script>
    
<style>
    
</style> -->
<template>
  <div class="w-100" style="height: 90%">
    <div
      id="zs_szy"
      class="w-100"
      style="height: 100%; position: relative"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import barY from "@/assets/image/underGround/ball.png";
const props = defineProps({
  szyData: {
    type: Object,
    default: () => [],
  },
  selectValue: {
    type: Number,
    default: 2024,
  },
});
watch(
  () => props.selectValue,
  (newValue, oldValue) => {
    getData(newValue);
  }
);
const getData = (value: any) => {
  const data = props.szyData[value]
    .sort((a: any, b: any) => a.value - b.value)
    .map((item: { name: any; value: any }, index: number) => ({
      name: item.name,
      value: item.value,
      symbolSize: [100, 100],
      symbol: "image://" + barY,
      draggable: true,
      label: {
        normal: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    }));
  myChart.setOption({
    series: [{
        data
      }]
    })
};
let option: any = {
  tooltip: {},
  color: ["#59EBE8", "#f29701"],
  animationDuration: 10000000, // 动画持续时间，单位毫秒
  animationEasing: "linear", // 缓动效果，线性的匀速运动
  series: [
    {
      type: "graph",
      layout: "force",
      force: {
        repulsion: 100, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
        edgeLength: 10, //边的两个节点之间的距离，值越小则长度越长，这个距离也会受                                             repulsion影响。
        gravity: 0.05, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
        layoutAnimation: true, //初始化时转动动画
      },
      label: {
        show: true,
        formatter: ["{a|{c}}", "{b|{b}}"].join("\n"),
        fontWeight: "1000",
        fontSize: "18",
        align: "center",
        verticalAlign: "center",
        rich: {
          a: {
            color: "#59EBE8",
            fontSize: 25,
            lineHeight: 30,
            textBorderColor: "transparent",
            textBorderWidth: 0,
          },
          b: {
            color: "#59EBE8",
            fontSize: 14,
            lineHeight: 30,
            textBorderColor: "transparent",
            textBorderWidth: 0,
          },
        },
      },
      data: [],
    },
  ],
};
var myChart: any;
onMounted(() => {
  let data: any = [];
  let arr = props.szyData[props.selectValue].sort(
    (a: any, b: any) => a.value - b.value
  );
  arr.map((item: any, index: any) => {
    data.push({
      name: item.name,
      value: item.value,
      symbolSize: [100, 100],
      symbol: "image://" + barY,
      draggable: true,
      label: {
        normal: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    });
  });
  console.log(data, " props.szyData");

  myChart = echarts.init(document.getElementById("zs_szy") as HTMLDivElement);
  option.series[0].data = data;
  myChart.setOption(option);
  (option as any).series = [];
  setInterval(() => {
    // myChart.setOption(option)
    var randomDuration = Math.floor(Math.random() * 2000) + 1000; // 生成 1000 到 3000 毫秒之间的随机持续时间
    var randomEasing = ["linear", "easeInOut", "elasticOut"][
      Math.floor(Math.random() * 3)
    ]; // 随机选择缓动效果

    myChart.setOption({
      series: [
        {
          animationDuration: randomDuration, // 随机持续时间
          animationEasing: "bounceOut", //randomEasing // 随机缓动效果
        },
      ],
    });
  }, 2000);
});
</script>

<style></style>
